<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐厅菜单系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-content">
                <h1 class="logo">
                    <i class="fas fa-utensils"></i>
                    美食天地
                </h1>
                <nav class="nav">
                    <a href="#" class="nav-link active">菜单</a>
                    <a href="#" class="nav-link">关于我们</a>
                    <a href="#" class="nav-link">联系我们</a>
                </nav>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main">
            <!-- 搜索和筛选区域 -->
            <section class="search-section">
                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" id="searchInput" placeholder="搜索菜品..." class="search-input">
                    </div>
                    <div class="filter-buttons">
                        <button class="filter-btn active" data-filter="all">全部</button>
                        <button class="filter-btn" data-filter="hot">热门</button>
                        <button class="filter-btn" data-filter="new">新品</button>
                    </div>
                </div>
            </section>

            <!-- 菜单展示区域 -->
            <section class="menu-section">
                <div class="menu-header">
                    <h2 class="section-title">今日菜单</h2>
                    <div class="menu-controls">
                        <button id="prevPage" class="page-btn" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <span id="pageInfo" class="page-info">第 1 页</span>
                        <button id="nextPage" class="page-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>

                <!-- 加载状态 -->
                <div id="loading" class="loading">
                    <div class="spinner"></div>
                    <p>正在加载菜单...</p>
                </div>

                <!-- 错误状态 -->
                <div id="error" class="error hidden">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>加载失败，请稍后重试</p>
                    <button id="retryBtn" class="retry-btn">重新加载</button>
                </div>

                <!-- 菜单网格 -->
                <div id="menuGrid" class="menu-grid">
                    <!-- 菜单项将通过JavaScript动态生成 -->
                </div>

                <!-- 空状态 -->
                <div id="empty" class="empty hidden">
                    <i class="fas fa-search"></i>
                    <p>没有找到相关菜品</p>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <div class="footer-content">
                <p>&copy; 2025 美食天地. 保留所有权利.</p>
            </div>
        </footer>
    </div>

    <!-- 菜品详情模态框 -->
    <div id="menuModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">菜品详情</h3>
                <button id="closeModal" class="close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="menu-detail">
                    <div class="menu-image">
                        <i class="fas fa-image"></i>
                    </div>
                    <div class="menu-info">
                        <h4 id="modalName"></h4>
                        <p id="modalFlavor" class="flavor"></p>
                        <div class="price-info">
                            <span class="price-label">价格:</span>
                            <span id="modalPrice" class="price"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/app.js}"></script>
</body>
</html> 